// 顶部迷你购物车
class miniShopCar {
    constructor() {
        this.show();
        this.hid();
    }
    show() {
        $('#header-car').on('mouseenter', function () {
            $('#header-car-son').stop().slideDown()
        })
    }
    hid() {
        $('#header-car').on('mouseleave', function () {
            $('#header-car-son').stop().slideUp()
        })
    }

}
let minicar=new miniShopCar();
// 搜索框
class search {
    constructor() {
        this.focus();
        //this.blur();
        this.mouseenter();
        this.mouseleave();
        this.lick();
    }
    // 聚焦
    focus() {
        $('#neck .neck-search input').on('focus', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #ff6a00"
            })
            $('#neck .neck-search ul').slideDown(100);
        })
    }
    //失去焦点
    blur() {
        $('#neck .neck-search input').on('blur', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #e0e0e0"
            })
            $('#neck .neck-search ul').slideUp(100);
        })
    }
    //进入文本框
    mouseenter() {
        $('#neck .neck-search').on('mouseenter', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #888888"
            })
        })
    }
    //离开文本框
    mouseleave() {
        $('#neck .neck-search').on('mouseleave', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #b0b0b0"
            })
            $('#neck .neck-search ul').slideUp(100);
        })
    }
    //点击li
    lick() {
        $('#neck .neck-search ul li').on('click', function () {
            console.log(1);
            $('#neck .neck-search input').val($(this).html());
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #e0e0e0"
            })
            $('#neck .neck-search ul').slideUp(100);
        })
    }


}
let intSearch=new search();
// 导航栏下拉菜单
class driverList {
    constructor() {
        this.showHide();
        this.addList();
    }
    showHide() {
        $('#neck .neck-divider ul li:lt(7)').on('mouseenter', function () {
            $('#neckFather .neck-divider-list').stop().slideDown(200);
        });
        $('#neck .neck-divider ul li:gt(6),#neck-list').on('mouseenter', function () {
            $('#neckFather .neck-divider-list').stop().slideUp(200);
        });
        $('.neck-divider-list').on('mouseleave', function () {
            $('#neckFather .neck-divider-list').stop().slideUp(200);
        })
        $('#neck-list').on('mouseenter', function () {
            $('#carousel-left').stop().show();
        })
        $('#neck-list,#carousel-left').on('mouseleave', function () {
            $('#carousel-left').stop().hide();
        })

    }
    addList() {
        $('#neck .neck-divider li:lt(7)').on('mouseover', function () {
            // 获取当前点击li 的下标
            let index = $(this).index();
            //console.log(index);
            $.get("../php/container-list.json", function (data) {
                let arr = Array.from(data[index]);
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += `<div class="col-md-2 goods1">
                    <img src="${arr[i].img}" alt="">
                    <div></div>
                    <p>${arr[i].name}</p>
                    <span>${arr[i].price}</span>
                </div>`;
                }
                $('.neck-divider-list .row').html(str);
                // 节点删除最后一个分割线
                $('.neck-divider-list .goods1:last-child div').remove();
            })
        })
    }
}
let dl= new driverList();
// 轮播图模块二级菜单
class carouselList {
    constructor() {
        this.showHide();
        this.addList();
    }
    showHide() {
        $('#carousel-left li').on('mouseenter', function () {
            $('#carousel-son').stop().show();
        })
        $('#carousel-left').on('mouseleave', function () {
            $('#carousel-son').stop().hide();
        })
    }
    addList() {
        $('#carousel-left li').on('mouseover', function () {
            // 获取当前点击li 的下标
            let index = $(this).index();
            //获取下标对应的数据
            $.get("../php/carousel-left.json",
                function (data) {
                    //将对象转换为数组
                    let arr = Array.from(data[index]);
                    // console.log(arr);
                    // 给子列表添加内容
                    let str = "";
                    for (let i = 0; i < arr.length; i++) {
                        str += ` <div class="carousel-list"><a href="#"><img src="${arr[i].img}" alt="">${arr[i].info}</a></div>`;
                    }
                    $('#carousel-son').html(str);
                });

        })
    }
}
let cl= new carouselList();



